<template>
	<view class="login">
		<view class="login-main">

			<template v-if="!status">
				
				<view class="login-logo">
					<image src="/static/img/logo.png"></image>
				</view>
				
				<view class="login-list flex border-all">
					<view class="iconfont icon-shoujihao flex"></view>
					<view class="login-input">
						<input type="number"  v-model="phone" placeholder="请输入手机号码" maxlength="11" />
					</view>
				</view>
				
				<view class="login-list flex border-all">
					<view class="iconfont icon-yanzhengyanzhengma flex"></view>
					<view class="login-input">
						<input type="number" maxlength="6" placeholder="请输入验证码" class="is-input1" v-model="code" />
					</view>
					<view class="code-sx"></view>
					<view class="border-bottom flex align-center justify-center font-sm text-white" :class="codeTime > 0 ? 'bg-main-disabled' : 'bg-main'" style="width: 180rpx;" @click="getCode">{{codeTime > 0 ? codeTime + ' s' : '获取验证码'}}</view>
				</view>
				
				<view class="login-list flex border-all">
					<view class="iconfont icon-mima flex"></view>
					<view class="login-input">
						<input   name="password" placeholder="请输入新密码" class="is-input1" password="true" v-model="password" />
					</view>
				</view>
				
	            <view class="bnt">
	                  <button type="default" @click="submit" style="background-color: #F14399;color: #fff;margin-top: 30px;">找回密码</button>
	            </view>
				
			</template>
			
		</view>
		
	

	</view>
</template>

<script>
	import uniStatusBar from '@/common/uni-status-bar/uni-status-bar.vue';


	export default {
		components: {
			uniStatusBar,
		},
		data() {
			return {
				status:false,
				password:"",
				phone:"",
				code:"",
				codeTime:0,
				loading:false
			}
		},
		onLoad() {
			
		},
		computed: {
			disabled() {
				if ((this.password === '') && (this.phone === '' || this.code === '' || this.rpassword === '')) {
					return true
				}
				return false
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 初始化表单
			initForm(){
				this.password = ''
				this.phone = ''
				this.code = ''
			},
			// 切换登录方式
			changeStatus(){
				// 初始化表单
				this.initForm()
				this.status = !this.status
			},
			// 获取验证码
			async  getCode(){
				// 防止重复获取
				if (this.codeTime > 0) {
					return;
				}
				// 验证手机号
				if (!this.validate()) return;
				
				const res = await this.$myRuquest({
					url: '/index/dsnv.activities/sendcode',
					data:{
						"phone":this.phone,
					},
				})
				
				if(res.data.code==200){
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					});
				}
			
			},
			// 表单验证
			validate(){
				//手机号正则
				var mPattern = /^1[345789]\d{9}$/; 
				if (!mPattern.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false
				}
				// ...更多验证
				return true
			},
			// 提交
			async submit(){
				
				const res = await this.$myRuquest({
					url: '/index/dsnv.activities/rpassword',
					data:{
						"phone":this.phone,
						"password":this.password,
						"code":this.code,
					},
				})

				if(res.data.code==200){
					uni.setStorageSync('my_info',res.data.date);
					//跳转到登录页面
					
					uni.switchTab({
					    url: '/pages/my/my'
					})
					
					setTimeout(() => {
								uni.showToast({
									title: res.data.info,
									icon: 'none'
								});
							}, 400)		
					
				}else{
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					});
				}
				

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
	}
	.login {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.login-main {
		flex: 1;
		padding: 0 70upx;

		.login-logo {
			width: 200upx;
			height: 200upx;
			padding-bottom: 50upx;
			margin: 50upx auto 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.logo-tip {
			text-align: center;
			padding-top: 25upx;
			font-size: 32upx;
			font-weight: 200;
			color: rgba(51, 51, 51, 1);
			padding-bottom: 50upx;
		}

		.login-list {
			margin-top: 35upx;
			height: 100upx;
			align-items: center;
			padding: 0 30upx;
			border: 1px solid #E8E8E8;
			border-radius:25px;

			&.border-all {
				&:after {
					border: 1px solid #D0D0D0;
					border-radius: 100upx;
				}
			}

			.iconfont {
				width: 65upx;
				font-size: 44upx;
				align-items: center;

				&:after {
					margin-left: 20upx;
					content: '';
					width: 2upx;
					height: 35upx;
					background: #D0D0D0;
					display: block;
				}
			}

			.login-input {
				flex: 1;
				
				input {
					font-size: 28upx;
					color: #333333;
					padding-left: 20upx;
				}
			}

			.code-sx {
				content: '';
				width: 2upx;
				height: 25upx;
				background: #D0D0D0;
				margin-right: 25upx;
			}

			.codeimg {
				font-size: 24upx;
				color: #999999;
			}
		}

		.login-btn {
			margin-top: 70upx;
			height: 96upx;
			width: 100%;
			background: linear-gradient(-90deg, rgba(80, 85, 168, 1), rgba(104, 110, 210, 1));
			border-radius: 47upx;
			font-size: 34upx;
			color: #ffffff;
		}

		
	}

	.login-footer {
		padding: 0 70upx;

		.footer-tip {
			margin-top: 20upx;
			align-items: center;
			font-size: 24upx;
			color: #999999;
			text-align: center;

			&:before {
				flex: 1;
				content: '';
				height: 2upx;
				background: #D0D0D0;
				margin-right: 30upx;
			}

			&:after {
				margin-left: 30upx;
				flex: 1;
				content: '';
				height: 2upx;
				background: #D0D0D0;
			}

		}

		.footer-other {
			padding: 40upx 0 100upx 0;
			justify-content: center;

			.other-list {
				width: 80upx;
				height: 80upx;
				margin: 0 75upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
